<template>
    <div class="tag">
        <div v-if="screenType === 'out'" class="out">
            <div class="out-top" :style="{ height: +showTopHeigth + 'px', width: +showTopWidth + 'px' }">
                <div v-if="top.src" :style="{ height: +showTopHeigth + 'px', width: +showTopWidth + 'px' }">
                    <img v-if="+top.resourcesType === 1" :src="top.src" alt="" />
                    <video
                        v-else
                        ref="outVideoRef"
                        style="width: 100%; height: 100%; object-fit: fill"
                        :src="top.src"
                        :autoplay="autoplay"
                        loop
                        controls
                    >
                        Sorry, your browser doesn't support embedded videos.
                    </video>
                    <div v-show="!isPlaying" class="play-mask" @click="play">
                        <i class="iconfont icon-bofang"></i>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="bottom-left">
                    <div v-if="bottom.leftSrc">
                        <img :src="bottom.leftSrc" alt="" />
                    </div>
                </div>
                <div class="bottom-right">
                    <div v-if="bottom.rightSrc">
                        <img :src="bottom.rightSrc" alt="" />
                    </div>
                </div>
            </div>
            <div class="logo1">
                <!-- <img src="../../assets/images/logo@2x.png" alt="" /> -->
                <img src="@/assets/logo@2x.png" alt="" />
            </div>
        </div>
        <div v-if="screenType === 'inner'" class="inner">
            <div class="inner-top" :style="{ height: +showTopHeigth + 'px', width: +showTopWidth + 'px' }">
                <div v-if="top.src" :style="{ height: +showTopHeigth + 'px', width: +showTopWidth + 'px' }">
                    <img v-if="+top.resourcesType === 1" :src="top.src" alt="" />
                    <video
                        v-else
                        ref="innerVideoRef"
                        style="width: 100%; height: 100%; object-fit: fill"
                        :src="top.src"
                        :autoplay="autoplay"
                        loop
                        controls
                    >
                        Sorry, your browser doesn't support embedded videos.
                    </video>
                    <div v-show="!isPlaying" class="play-mask" @click="play">
                        <i class="iconfont icon-bofang"></i>
                    </div>
                </div>
            </div>
            <div class="inner-bottom" :style="{ height: +showBottomHeigth + 'px', width: +showBottomWidth + 'px' }">
                <div v-if="bottom.src" :style="{ height: +showBottomHeigth + 'px', width: +showBottomWidth + 'px' }">
                    <img :src="bottom.src" alt="" />
                </div>
            </div>
            <div class="logo">
                <!-- <img src="../../assets/images/logo@2x.png" alt="" /> -->
                <img src="@/assets/logo@2x.png" alt="" />
            </div>
        </div>
        <div v-if="screenType === 'single'" class="single">
            <div class="single-top" :style="{ height: +showTopHeigth + 'px', width: +showTopWidth + 'px' }">
                <div v-if="top.src" :style="{ height: +showTopHeigth + 'px', width: +showTopWidth + 'px' }">
                    <img v-if="+top.resourcesType === 1" :src="top.src" alt="" />
                    <video
                        v-else
                        ref="singleVideoRef"
                        style="width: 100%; height: 100%; object-fit: fill"
                        :src="top.src"
                        :autoplay="autoplay"
                        loop
                        controls
                    >
                        Sorry, your browser doesn't support embedded videos.
                    </video>
                    <div v-show="!isPlaying" class="play-mask" @click="play">
                        <i class="iconfont icon-bofang"></i>
                    </div>
                </div>
            </div>
            <div class="logo">
                <!-- <img src="../../assets/images/logo@2x.png" alt="" /> -->
                <img src="@/assets/logo@2x.png" alt="" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, computed, PropType, ref, getCurrentInstance, onMounted } from 'vue';

export default defineComponent({
    name: 'XCScreenType',
    props: {
        top: {
            type: Object as PropType<{
                resourcesType: number;
                src: string;
                width?: number;
                height?: number;
            }>,
            default() {
                return {
                    resourcesType: 2, // 1 图片 2视频
                    // src: 'http://shqztcdn.xinchao.com/dev/2022-08-19/45eb42489b5344ad8f9b67f5c393f90d/529f0e44c28e433e9fe9572316be3dde.mp4', // 1920*1080
                    src: 'https://shqztcdn.xinchao.com/dev/2022-08-19/680b0c01b4aa4b7b9b057b98ce44fff6/92c9faffa6d0473e94d0255e0e9c9702_rotate.mp4', // 1080*1920
                };
            },
        },
        bottom: {
            type: Object as PropType<{
                resourcesType: number;
                leftSrc?: string;
                rightSrc?: string;
                src?: string;
                width?: number;
                height?: number;
            }>,
            default() {
                return {
                    leftSrc:
                        'https://img2.baidu.com/it/u=3936752424,4160994938&fm=253&fmt=auto&app=120&f=JPEG?w=982&h=800',
                    rightSrc:
                        'https://img1.baidu.com/it/u=3762080099,1352194736&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
                    src: 'https://img1.baidu.com/it/u=3762080099,1352194736&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',
                };
            },
        },
        screenType: {
            type: String,
            default() {
                return 'out';
            },
        },
        autoplay: {
            type: Boolean,
            default: true,
        },
    },

    setup(props: any, { emit, expose }) {
        const showTopHeigth = computed(() => {
            if (props.screenType === 'inner' || props.screenType === 'single') {
                return props.top.height ? props.top.height : 384;
            } else if (props.screenType === 'out') {
                return props.top.height ? props.top.height : 180;
            }
            return 180;
        });
        const showTopWidth = computed(() => {
            if (props.screenType === 'inner' || props.screenType === 'single') {
                return props.top.width ? props.top.width : 216;
            } else if (props.screenType === 'out') {
                return props.top.width ? props.top.width : 320;
            }
            return 320;
        });
        const showBottomHeigth = computed(() => {
            if (props.screenType === 'inner') {
                return props.bottom.height ? props.bottom.height : 122;
            } else if (props.screenType === 'out') {
                return props.bottom.height ? props.bottom.height : 180;
            }
            return 180;
        });
        const showBottomWidth = computed(() => {
            if (props.screenType === 'inner') {
                return props.bottom.width ? props.bottom.width : 216;
            } else if (props.screenType === 'out') {
                return props.bottom.width ? props.bottom.width : 320;
            }
            return 320;
        });

        const instance = getCurrentInstance();
        let { proxy } = instance;

        const isPlaying = ref(props.autoplay);
        const outVideoRef = ref<HTMLVideoElement | null>(null);
        const innerVideoRef = ref<HTMLVideoElement | null>(null);
        const singleVideoRef = ref<HTMLVideoElement | null>(null);
        let curVideo: HTMLVideoElement | null = null;

        onMounted(() => {
            if (props.screenType === 'inner') {
                curVideo = innerVideoRef.value;
            } else if (props.screenType === 'out') {
                curVideo = outVideoRef.value;
            } else if (props.screenType === 'single') {
                curVideo = singleVideoRef.value;
            }
            emit('getInstance', proxy);
        });

        const setPauseState = () => {
            isPlaying.value = false;
            curVideo?.pause();
        };

        const setPlayState = () => {
            isPlaying.value = true;
            if (curVideo) {
                curVideo.currentTime = 0;
                curVideo.muted = false;
            }
            curVideo?.play();
        };

        const play = () => {
            setPlayState();
            emit('onPlay', proxy);
        };

        const pause = () => {
            setPauseState();
            emit('onPause', proxy);
        };

        // expose({ setPlayState, setPauseState });

        return {
            showTopHeigth,
            showTopWidth,
            showBottomHeigth,
            showBottomWidth,
            isPlaying,
            outVideoRef,
            innerVideoRef,
            singleVideoRef,
            play,
            pause,
            setPlayState,
            setPauseState,
        };
    },
});
</script>

<style lang="scss" scoped>
.out {
    width: 340px;
    height: 311px;
    padding: 10px 10px 5px 10px;
    background: #f1f2f4;
    box-shadow: 0 4px 10px 0 rgba(165, 166, 170, 0.5);
    box-sizing: border-box;
    .out-top {
        margin-bottom: 10px;
        background: #fff;
        position: relative;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .bottom {
        display: flex;
        justify-content: space-between;
        .bottom-left,
        .bottom-right {
            width: 155px;
            height: 87px;
            background: #fff;
            > div {
                width: 100%;
                height: 100%;
            }
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
.play-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    i {
        display: block;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
.logo1 {
    text-align: right;
    img {
        width: 121px;
        height: 14px;
        vertical-align: middle;
    }
}
.logo {
    text-align: right;
    img {
        width: 121px;
        height: 14px;
        vertical-align: 1px;
    }
}
.inner {
    width: 236px;
    height: 552px;
    background: #f1f2f4;
    box-shadow: 0 4px 10px 0 rgba(165, 166, 170, 0.5);
    padding: 10px 10px 0 10px;
    box-sizing: border-box;
    .inner-top {
        background: #fff;
        margin-bottom: 10px;
        position: relative;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .inner-bottom {
        background: #fff;
        margin-bottom: 5px;
        img {
            width: 100%;
            height: 100%;
        }
    }
}
.single {
    width: 236px;
    height: 420px;
    background: #f1f2f4;
    box-shadow: 0 4px 10px 0 rgba(165, 166, 170, 0.5);
    padding: 10px 10px 0 10px;
    box-sizing: border-box;
    .single-top {
        background: #fff;
        margin-bottom: 5px;
        position: relative;
        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
